<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui-eg.css" />
		<style>
			html , body {
				background-color: transparent;
			}
		</style>
	</head>
	<body>
		<div onclick="bottomListTouch('-1');" id="aui_modal" class="aui-eg-modal aui-eg-modal-bg">
			<div id="aui_modal_bottom" class="aui-eg-modal-bottom">
				<ul id="aui_modal_bottom_view" class="aui-eg-modal-bottom-view">
					
				</ul>
				<div id="aui_modal_bottom_btn" onclick="bottomListTouch('-1');" class="aui-eg-modal-bottom-btn aui-text-center">取消</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/aui-eg.js"></script>
	<script type="text/javascript">
		apiready = function() {
			api.parseTapmode();
			init();
		};
		function init() {
			//模态透明度
			var modalOpacity = api.pageParam.modalOpacity?api.pageParam.modalOpacity:"0.0";
			//菜单背景颜色 支持rgba透明
			var menuBgColor = api.pageParam.menuBgColor?api.pageParam.menuBgColor:"rgba(255,255,255,0.8)";
			//菜单圆角
			var menuRadius = api.pageParam.menuRadius?api.pageParam.menuRadius:"5";
			//内容文字颜色
			var textColor = api.pageParam.textColor?api.pageParam.textColor:"#333333";
			//文字大小
			var textSize = api.pageParam.textSize?api.pageParam.textSize:"18";
			//分割线颜色
			var lineColor = api.pageParam.lineColor?api.pageParam.lineColor:"#eeeeee";
			//内容
			var data = [{
							"title":"微信好友","icon":"weixin","color":"#79c141"
						},{
							"title":"微信朋友圈","icon":"pengyouquan","color":"#ff9e00"
						},{
							"title":"新浪微博","icon":"weibo","color":"#f85357"
						},{
							"title":"QQ","icon":"QQ","color":"#339ee6"
						},{
							"title":"支付宝好友","icon":"zhifubao","color":"#00a0e9"
						},{
							"title":"复制链接","icon":"lianjie","color":"#5298dd"
						}];
			var textData = api.pageParam.textData?api.pageParam.textData:data;
			
			//内容处理
			var modalTopView = document.getElementById("aui_modal_bottom_view");
			var html = "";
			for( i in textData){
				html += '<li onclick="bottomListTouch('+i+');" class="aui-eg-modal-bottom-view-cell aui-col-xs-4">'+
							'<div style="border-color:'+textData[i].color+';" class="round-basic">'+
								'<span style="color:'+textData[i].color+';" class="aui-eg-iconfont aui-eg-icon-'+textData[i].icon+' vali-'+textData[i].icon+'"></span>'+
							'</div>'+
							'<p style="color:'+textColor+';font-size:'+textSize+'px;" class="aui-text-center">'+textData[i].title+'</p>'+
						'</li>';
			}
			modalTopView.innerHTML = html;
			
			//框架处理
			var modal = document.getElementById('aui_modal');
			modal.style.backgroundColor = "rgba(0,0,0," + modalOpacity + ")";
			var modalBottom = document.getElementById("aui_modal_bottom");
			modalBottom.style.backgroundColor = menuBgColor;
			modalBottom.style.webkitBorderRadius = menuRadius + "px";
			modalBottom.style.borderRadius = menuRadius + "px";
			var modalBottomBtn = document.getElementById("aui_modal_bottom_btn");
			modalBottomBtn.style.borderColor = lineColor;
		}
		function bottomListTouch(index){
			api.sendEvent({
				name:"aui-eg-modal-footer-callback",
				extra: {buttonIndex:index}
			});
			event.stopPropagation();
			api.closeFrame();
		}
	</script>
</html>